<!DOCTYPE html>
<meta charset="utf-8" />
<title>Popup anchor nesting</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<link rel=help href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>

<body>

<!-- This example has the anchor (b1) for one popup (p1)
     which contains a separate popup (p2) which is anchored
     by a separate anchor (b2). -->
<button id=b1 onclick='p1.show()'>Popup 1
  <popup id=p2 anchor=b2>
    <span id=inside2>Inside popup 2</span>
  </popup>
</button>
<popup id=p1 anchor=b1>This is popup 1</popup>
<button id=b2 onclick='p2.show()'>Popup 2</button>

<style>
  #p1 { top:50px; }
  #p2 { top:50px; left:250px; }
  popup { border: 5px solid red; }
</style>


<script>
  function clickOn(element) {
    const actions = new test_driver.Actions();
    return actions.pointerMove(0, 0, {origin: element})
      .pointerDown({button: actions.ButtonType.LEFT})
      .pointerUp({button: actions.ButtonType.LEFT})
      .send();
  }

  const popup1 = document.querySelector('#p1');
  const button1 = document.querySelector('#b1');
  const popup2 = document.querySelector('#p2');

  (async function() {
    setup({ explicit_done: true });

    popup1.show();
    assert_true(popup1.open);
    popup2.show();
    assert_true(popup2.open);
    assert_false(popup1.open,'Popups are not nested, so popup1 should close');
    await clickOn(button1);
    test(t => {
      // Button1 is the anchor for popup1, and an ancestor of popup2.
      // Since popup2 is open, but not popup1, button1 should not be
      // the anchor of any open popup. So popup2 should be closed.
      assert_false(popup2.open);
    },'Nested popups (inside anchor elements) do not affect light dismiss');

    done();
  })();
</script>
